<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cencat SaaS - AI日志智能诊断</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            success: '#52C41A',
            warning: '#FAAD14',
            danger: '#FF4D4F',
            info: '#40A9FF',
            dark: '#1D2129',
            'dark-2': '#4E5969',
            'light-1': '#F2F3F5',
            'light-2': '#E5E6EB',
            'light-3': '#C9CDD4'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
          boxShadow: {
            'card': '0 2px 14px 0 rgba(0, 0, 0, 0.06)',
            'card-hover': '0 6px 20px 0 rgba(0, 0, 0, 0.1)',
            'dropdown': '0 4px 16px rgba(0, 0, 0, 0.12)',
            'modal': '0 10px 30px -5px rgba(0, 0, 0, 0.1)',
          }
        },
      }
    }
  </script>
  
  <style>
    body { font-family: 'Inter', system-ui, sans-serif; overflow-x: hidden; }
    html { scroll-behavior: smooth; }
    .progress-bar { transition: width 1s ease-in-out; }
    .table-row-hover { transition: background-color 0.2s ease; }
    .table-row-hover:hover { background-color: rgba(242, 243, 245, 0.5); }
    
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes slideIn { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    .animate-fade-in { animation: fadeIn 0.3s ease-in-out; }
    .animate-slide-in { animation: slideIn 0.3s ease-out; }
    
    .log-level-error { background-color: #fee; border-left: 4px solid #ff4d4f; }
    .log-level-warn { background-color: #fff7e6; border-left: 4px solid #faad14; }
    .log-level-info { background-color: #e6f7ff; border-left: 4px solid #1890ff; }
  </style>
</head>

<body class="bg-light-1 text-dark overflow-x-hidden">
  <div class="flex h-screen">
    <!-- 侧边栏导航 -->
    <aside id="sidebar" class="w-64 bg-white h-full shadow-md fixed left-0 top-0 z-30 transition-all duration-300 transform md:translate-x-0 -translate-x-full">
      <div class="p-4 border-b border-light-2 flex items-center space-x-3">
        <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
          <i class="fa fa-cubes text-white text-xl"></i>
        </div>
        <div>
          <h1 class="text-lg font-bold text-primary">Cencat SaaS</h1>
          <p class="text-xs text-dark-2">多租户管理平台</p>
        </div>
        <button id="close-sidebar" class="ml-auto md:hidden text-dark-2 hover:text-primary">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <div class="p-4 border-b border-light-2">
        <div class="flex items-center space-x-3">
          <div class="w-10 h-10 bg-light-1 rounded-full overflow-hidden">
            <img src="https://picsum.photos/id/1005/200/200" alt="当前租户Logo" class="w-full h-full object-cover">
          </div>
          <div>
            <p class="font-medium text-sm">云帆科技有限公司</p>
            <p class="text-xs text-dark-2">企业版 | ID: T2025001</p>
          </div>
        </div>
        <button id="switch-tenant-btn" class="mt-3 w-full text-xs text-primary hover:text-primary/80 flex items-center justify-center space-x-1 transition-all duration-300">
          <i class="fa fa-exchange"></i>
          <span>切换租户</span>
        </button>
      </div>
      
      <nav class="p-3">
        <ul class="space-y-1">
          <li class="text-xs font-semibold text-dark-2 uppercase tracking-wider px-3 py-2">主导航</li>
          
          <li>
            <a href="dashboard.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-dashboard w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>仪表盘</span>
            </a>
          </li>
          
          <li>
            <a href="tenants.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-building-o w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>租户管理</span>
            </a>
          </li>
          
          <li class="text-xs font-semibold text-dark-2 uppercase tracking-wider px-3 py-2 mt-4">AI赋能功能</li>
          
          <li>
            <a href="ai-code-generator.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-code w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>AI代码生成</span>
            </a>
          </li>
          
          <li>
            <a href="ai-log-diagnosis.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg bg-primary/10 text-primary group transition-all duration-300">
              <i class="fa fa-bug w-5 h-5 mr-3"></i>
              <span>日志智能诊断</span>
            </a>
          </li>
          
          <li>
            <a href="ai-customer-service.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-comments-o w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>智能客服</span>
            </a>
          </li>
          
          <li>
            <a href="low-code-platform.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-puzzle-piece w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>低代码平台</span>
            </a>
          </li>
          
          <li class="text-xs font-semibold text-dark-2 uppercase tracking-wider px-3 py-2 mt-4">系统管理</li>
          
          <li>
            <a href="configurations.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-key w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>配置管理</span>
            </a>
          </li>
          
          <li class="text-xs font-semibold text-dark-2 uppercase tracking-wider px-3 py-2 mt-4">系统设置</li>
          
          <li>
            <a href="packages.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-tags w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>套餐管理</span>
            </a>
          </li>
          
          <li>
            <a href="security.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-shield w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>安全设置</span>
            </a>
          </li>
          
          <li>
            <a href="logs.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-file-text-o w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>操作日志</span>
            </a>
          </li>
        </ul>
      </nav>
      
      <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-light-2">
        <div class="bg-light-1 rounded-lg p-3">
          <div class="flex items-center justify-between mb-2">
            <span class="text-xs text-dark-2">异常检测</span>
            <span class="text-xs font-medium">3个异常</span>
          </div>
          <div class="h-1.5 bg-light-2 rounded-full overflow-hidden">
            <div class="h-full bg-warning rounded-full progress-bar" style="width: 15%"></div>
          </div>
          <button class="mt-2 w-full text-xs bg-warning/10 text-warning py-1.5 rounded hover:bg-warning/20 transition-all duration-300">
            查看详情
          </button>
        </div>
      </div>
    </aside>

    <!-- 主内容区 -->
    <div class="flex-1 md:ml-64 transition-all duration-300">
      <!-- 顶部导航栏 -->
      <header class="bg-white shadow-sm sticky top-0 z-20">
        <div class="flex items-center justify-between p-4">
          <div class="flex items-center">
            <button id="toggle-sidebar" class="mr-4 text-dark-2 hover:text-primary md:hidden">
              <i class="fa fa-bars text-xl"></i>
            </button>
            <div class="relative">
              <input type="text" placeholder="搜索日志关键词..." class="pl-10 pr-4 py-2 rounded-lg bg-light-1 text-sm w-64 focus:outline-none focus:ring-2 focus:ring-primary/30">
              <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-dark-2"></i>
            </div>
          </div>
          
          <div class="flex items-center space-x-4">
            <div class="relative">
              <button id="notification-btn" class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-light-1 relative transition-all duration-300">
                <i class="fa fa-bell-o text-dark-2"></i>
                <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
              </button>
            </div>
            
            <button class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-light-1 transition-all duration-300">
              <i class="fa fa-question text-dark-2"></i>
            </button>
            
            <div class="relative">
              <button id="user-menu-btn" class="flex items-center space-x-2">
                <div class="w-9 h-9 rounded-full overflow-hidden border-2 border-transparent hover:border-primary transition-all duration-300">
                  <img src="https://picsum.photos/id/1012/200/200" alt="管理员头像" class="w-full h-full object-cover">
                </div>
                <div class="hidden md:block text-left">
                  <p class="text-sm font-medium">张管理员</p>
                  <p class="text-xs text-dark-2">超级管理员</p>
                </div>
                <i class="fa fa-angle-down text-dark-2 hidden md:block"></i>
              </button>
            </div>
          </div>
        </div>
      </header>

      <!-- 页面内容 -->
      <main class="p-4 md:p-6">
        <!-- 页面标题和操作 -->
        <div class="mb-6 animate-fade-in flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">AI日志智能诊断</h2>
            <p class="text-dark-2 mt-1">智能分析系统日志，自动诊断问题并提供解决方案</p>
          </div>
          
          <div class="flex space-x-3">
            <button class="bg-light-1 text-dark hover:bg-light-2 text-sm px-4 py-2 rounded-lg transition-all duration-300 flex items-center">
              <i class="fa fa-filter mr-2"></i>
              <span>筛选条件</span>
            </button>
            
            <button class="bg-primary text-white text-sm px-4 py-2 rounded-lg hover:bg-primary/90 transition-all duration-300 flex items-center">
              <i class="fa fa-refresh mr-2"></i>
              <span>实时监控</span>
            </button>
          </div>
        </div>

        <!-- 系统健康状态 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
          <div class="bg-white rounded-xl shadow-card p-5 animate-slide-in">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-sm text-dark-2">系统健康度</p>
                <p class="text-2xl font-bold text-success mt-1">95%</p>
                <p class="text-xs text-success mt-1">运行正常</p>
              </div>
              <div class="w-12 h-12 bg-success/10 rounded-full flex items-center justify-center">
                <i class="fa fa-heartbeat text-success text-xl"></i>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-card p-5 animate-slide-in">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-sm text-dark-2">今日异常数</p>
                <p class="text-2xl font-bold text-warning mt-1">8</p>
                <p class="text-xs text-warning mt-1">需要关注</p>
              </div>
              <div class="w-12 h-12 bg-warning/10 rounded-full flex items-center justify-center">
                <i class="fa fa-exclamation-triangle text-warning text-xl"></i>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-card p-5 animate-slide-in">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-sm text-dark-2">响应时间</p>
                <p class="text-2xl font-bold text-info mt-1">128ms</p>
                <p class="text-xs text-info mt-1">平均响应</p>
              </div>
              <div class="w-12 h-12 bg-info/10 rounded-full flex items-center justify-center">
                <i class="fa fa-clock-o text-info text-xl"></i>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-card p-5 animate-slide-in">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-sm text-dark-2">AI诊断准确率</p>
                <p class="text-2xl font-bold text-secondary mt-1">92%</p>
                <p class="text-xs text-secondary mt-1">高准确率</p>
              </div>
              <div class="w-12 h-12 bg-secondary/10 rounded-full flex items-center justify-center">
                <i class="fa fa-brain text-secondary text-xl"></i>
              </div>
            </div>
          </div>
        </div>

        <!-- AI智能诊断区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
          <!-- 日志输入区域 -->
          <div class="bg-white rounded-xl shadow-card p-6 animate-slide-in">
            <h3 class="text-lg font-semibold mb-4">日志分析</h3>
            
            <div class="mb-4">
              <label class="block text-sm font-medium text-dark-2 mb-2">选择租户</label>
              <select id="tenant-select" class="w-full p-2 border border-light-2 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30">
                <option value="all">所有租户</option>
                <option value="T2025001" selected>云帆科技有限公司 (T2025001)</option>
                <option value="T2025002">星辰教育集团 (T2025002)</option>
                <option value="T2025003">创新科技有限公司 (T2025003)</option>
              </select>
            </div>
            
            <div class="mb-4">
              <label class="block text-sm font-medium text-dark-2 mb-2">时间范围</label>
              <div class="grid grid-cols-2 gap-2">
                <input type="datetime-local" class="p-2 border border-light-2 rounded text-sm" placeholder="开始时间">
                <input type="datetime-local" class="p-2 border border-light-2 rounded text-sm" placeholder="结束时间">
              </div>
            </div>
            
            <div class="mb-4">
              <label class="block text-sm font-medium text-dark-2 mb-2">日志级别</label>
              <div class="flex space-x-2">
                <label class="flex items-center space-x-1">
                  <input type="checkbox" checked class="rounded">
                  <span class="text-xs">ERROR</span>
                </label>
                <label class="flex items-center space-x-1">
                  <input type="checkbox" checked class="rounded">
                  <span class="text-xs">WARN</span>
                </label>
                <label class="flex items-center space-x-1">
                  <input type="checkbox" class="rounded">
                  <span class="text-xs">INFO</span>
                </label>
                <label class="flex items-center space-x-1">
                  <input type="checkbox" class="rounded">
                  <span class="text-xs">DEBUG</span>
                </label>
              </div>
            </div>
            
            <div class="mb-4">
              <label class="block text-sm font-medium text-dark-2 mb-2">上传日志文件</label>
              <div class="border-2 border-dashed border-light-2 rounded-lg p-4 text-center cursor-pointer hover:border-primary transition-all duration-300">
                <i class="fa fa-cloud-upload text-3xl text-dark-2 mb-2"></i>
                <p class="text-sm text-dark-2">拖拽日志文件到这里或点击上传</p>
                <p class="text-xs text-dark-2 mt-1">支持 .log, .txt 格式</p>
              </div>
            </div>
            
            <div class="mb-4">
              <label class="block text-sm font-medium text-dark-2 mb-2">或粘贴日志内容</label>
              <textarea id="log-content" class="w-full h-32 p-3 border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 resize-none" placeholder="粘贴你的日志内容..."></textarea>
              <div class="flex justify-between mt-1">
                <span class="text-xs text-dark-2">支持多行日志内容</span>
                <span class="text-xs text-dark-2">0/5000字符</span>
              </div>
            </div>
            
            <div class="mb-4">
              <label class="block text-sm font-medium text-dark-2 mb-2">AI分析选项</label>
              <div class="space-y-2">
                <label class="flex items-center space-x-2">
                  <input type="checkbox" checked class="rounded">
                  <span class="text-sm">自动识别异常模式</span>
                </label>
                <label class="flex items-center space-x-2">
                  <input type="checkbox" checked class="rounded">
                  <span class="text-sm">提供解决方案建议</span>
                </label>
                <label class="flex items-center space-x-2">
                  <input type="checkbox" class="rounded">
                  <span class="text-sm">生成修复代码</span>
                </label>
              </div>
            </div>
            
            <button class="w-full bg-primary text-white py-3 rounded-lg hover:bg-primary/90 transition-all duration-300 flex items-center justify-center">
              <i class="fa fa-search mr-2"></i>
              <span>开始AI诊断</span>
            </button>
          </div>

          <!-- AI诊断结果 -->
          <div class="bg-white rounded-xl shadow-card p-6 animate-slide-in">
            <h3 class="text-lg font-semibold mb-4">AI诊断结果</h3>
            
            <div class="space-y-4">
              <!-- 问题1 -->
              <div class="log-level-error p-4 rounded-lg">
                <div class="flex items-center justify-between mb-2">
                  <div class="flex items-center">
                    <i class="fa fa-exclamation-circle text-danger mr-2"></i>
                    <span class="font-medium">数据库连接超时</span>
                  </div>
                  <span class="text-xs text-danger">高优先级</span>
                </div>
                <p class="text-sm mb-2">检测到租户T2025001在09-25 01:30出现数据库连接超时异常</p>
                <div class="bg-white p-3 rounded border text-xs">
                  <p class="font-mono">java.sql.SQLTimeoutException: Timeout after 30000ms of waiting for a connection.</p>
                </div>
                <div class="mt-3">
                  <p class="text-xs font-medium mb-1">AI建议解决方案：</p>
                  <ul class="text-xs space-y-1">
                    <li>• 检查数据库连接池配置，适当增加最大连接数</li>
                    <li>• 优化SQL查询性能，添加必要的索引</li>
                    <li>• 考虑使用数据库连接池监控工具</li>
                  </ul>
                </div>
              </div>
              
              <!-- 问题2 -->
              <div class="log-level-warn p-4 rounded-lg">
                <div class="flex items-center justify-between mb-2">
                  <div class="flex items-center">
                    <i class="fa fa-exclamation-triangle text-warning mr-2"></i>
                    <span class="font-medium">API响应时间上升</span>
                  </div>
                  <span class="text-xs text-warning">中优先级</span>
                </div>
                <p class="text-sm mb-2">检测到用户查询接口响应时间连续3天上升</p>
                <div class="bg-white p-3 rounded border text-xs">
                  <p class="font-mono">API Response Time: 150ms → 280ms (3 days trend)</p>
                </div>
                <div class="mt-3">
                  <p class="text-xs font-medium mb-1">AI建议解决方案：</p>
                  <ul class="text-xs space-y-1">
                    <li>• 检查数据库索引是否有效</li>
                    <li>• 考虑添加查询结果缓存</li>
                    <li>• 优化相关业务逻辑</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 趋势分析 -->
        <div class="bg-white rounded-xl shadow-card p-6 animate-slide-in mb-6">
          <h3 class="text-lg font-semibold mb-4">异常趋势分析</h3>
          
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
            <div class="text-center p-4 border border-light-2 rounded-lg">
              <p class="text-2xl font-bold text-warning">12</p>
              <p class="text-sm text-dark-2">本周异常总数</p>
            </div>
            <div class="text-center p-4 border border-light-2 rounded-lg">
              <p class="text-2xl font-bold text-danger">3</p>
              <p class="text-sm text-dark-2">高优先级异常</p>
            </div>
            <div class="text-center p-4 border border-light-2 rounded-lg">
              <p class="text-2xl font-bold text-success">85%</p>
              <p class="text-sm text-dark-2">问题解决率</p>
            </div>
          </div>
          
          <div class="h-64 bg-light-1 rounded-lg flex items-center justify-center">
            <p class="text-dark-2">异常趋势图表区域</p>
          </div>
        </div>

        <!-- 自然语言问答 -->
        <div class="bg-white rounded-xl shadow-card p-6 animate-slide-in">
          <h3 class="text-lg font-semibold mb-4">AI智能问答</h3>
          
          <div class="mb-4">
            <div class="flex space-x-2 mb-3">
              <button class="text-sm text-primary border-b-2 border-primary pb-1">常见问题</button>
              <button class="text-sm text-dark-2 hover:text-dark pb-1">系统性能</button>
              <button class="text-sm text-dark-2 hover:text-dark pb-1">错误诊断</button>
            </div>
            
            <div class="space-y-3">
              <div class="p-3 bg-light-1 rounded-lg cursor-pointer hover:bg-light-2 transition-all duration-300">
                <p class="text-sm font-medium">为什么租户A的登录失败率高？</p>
              </div>
              <div class="p-3 bg-light-1 rounded-lg cursor-pointer hover:bg-light-2 transition-all duration-300">
                <p class="text-sm font-medium">如何优化数据库查询性能？</p>
              </div>
              <div class="p-3 bg-light-1 rounded-lg cursor-pointer hover:bg-light-2 transition-all duration-300">
                <p class="text-sm font-medium">系统出现内存泄漏怎么办？</p>
              </div>
            </div>
          </div>
          
          <div class="flex space-x-2">
            <input type="text" placeholder="输入你的问题..." class="flex-1 p-2 border border-light-2 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30">
            <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-all duration-300">
              <i class="fa fa-paper-plane"></i>
            </button>
          </div>
        </div>
      </main>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 侧边栏切换
      const sidebar = document.getElementById('sidebar');
      const toggleSidebar = document.getElementById('toggle-sidebar');
      const closeSidebar = document.getElementById('close-sidebar');
      
      toggleSidebar.addEventListener('click', function() {
        sidebar.classList.toggle('-translate-x-full');
      });
      
      closeSidebar.addEventListener('click', function() {
        sidebar.classList.add('-translate-x-full');
      });
      // 日志诊断功能
      const diagnoseBtn = document.querySelector('.fa-search').closest('button');
      const logContent = document.getElementById('log-content');
      const tenantSelect = document.getElementById('tenant-select');
      
      diagnoseBtn.addEventListener('click', function() {
        if (logContent.value.trim() === '' && tenantSelect.value === 'all') {
          alert('请选择租户或输入日志内容');
          return;
        }
        
        // 模拟AI诊断过程
        diagnoseBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i><span>诊断中...</span>';
        diagnoseBtn.disabled = true;
        
        setTimeout(() => {
          diagnoseBtn.innerHTML = '<i class="fa fa-search mr-2"></i><span>开始AI诊断</span>';
          diagnoseBtn.disabled = false;
          
          // 显示诊断结果
          showDiagnosisResults(logContent.value, tenantSelect.value);
        }, 3000);
      });
      
      // 显示诊断结果
      function showDiagnosisResults(logContent, tenantId) {
        const results = generateAIDiagnosis(logContent, tenantId);
        const resultsContainer = document.querySelector('.space-y-4');
        
        // 清空现有结果
        resultsContainer.innerHTML = '';
        
        // 添加新的诊断结果
        results.forEach(result => {
          const resultDiv = document.createElement('div');
          resultDiv.className = `log-level-${result.level} p-4 rounded-lg`;
          resultDiv.innerHTML = `
            <div class="flex items-center justify-between mb-2">
              <div class="flex items-center">
                <i class="fa fa-${result.icon} text-${result.color} mr-2"></i>
                <span class="font-medium">${result.title}</span>
              </div>
              <span class="text-xs text-${result.color}">${result.priority}</span>
            </div>
            <p class="text-sm mb-2">${result.description}</p>
            ${result.logContent ? `
            <div class="bg-white p-3 rounded border text-xs">
              <p class="font-mono">${result.logContent}</p>
            </div>
            ` : ''}
            <div class="mt-3">
              <p class="text-xs font-medium mb-1">AI建议解决方案：</p>
              <ul class="text-xs space-y-1">
                ${result.solutions.map(solution => `<li>• ${solution}</li>`).join('')}
              </ul>
            </div>
          `;
          resultsContainer.appendChild(resultDiv);
        });
      }
      
      // 生成AI诊断结果
      function generateAIDiagnosis(logContent, tenantId) {
        const baseResults = [
          {
            level: 'error',
            icon: 'exclamation-circle',
            color: 'danger',
            title: '数据库连接超时',
            priority: '高优先级',
            description: `检测到租户${tenantId}出现数据库连接超时异常`,
            logContent: 'java.sql.SQLTimeoutException: Timeout after 30000ms of waiting for a connection.',
            solutions: [
              '检查数据库连接池配置，适当增加最大连接数',
              '优化SQL查询性能，添加必要的索引',
              '考虑使用数据库连接池监控工具'
            ]
          },
          {
            level: 'warn',
            icon: 'exclamation-triangle',
            color: 'warning',
            title: 'API响应时间上升',
            priority: '中优先级',
            description: '检测到用户查询接口响应时间连续3天上升',
            logContent: 'API Response Time: 150ms → 280ms (3 days trend)',
            solutions: [
              '检查数据库索引是否有效',
              '考虑添加查询结果缓存',
              '优化相关业务逻辑'
            ]
          }
        ];
        
        // 根据日志内容添加更多诊断结果
        if (logContent.includes('内存') || logContent.includes('Memory')) {
          baseResults.push({
            level: 'error',
            icon: 'exclamation-circle',
            color: 'danger',
            title: '内存使用异常',
            priority: '高优先级',
            description: '检测到系统内存使用率持续偏高',
            logContent: 'Memory usage: 85% → 92% (2 hours trend)',
            solutions: [
              '检查是否存在内存泄漏',
              '优化大对象的使用和释放',
              '考虑增加JVM堆内存配置'
            ]
          });
        }
        
        if (logContent.includes('登录') || logContent.includes('Login')) {
          baseResults.push({
            level: 'warn',
            icon: 'exclamation-triangle',
            color: 'warning',
            title: '登录失败率上升',
            priority: '中优先级',
            description: '检测到用户登录失败率异常升高',
            logContent: 'Login failure rate: 2% → 8% (24 hours)',
            solutions: [
              '检查密码策略和账户锁定机制',
              '验证网络连接和认证服务状态',
              '审查安全日志是否存在异常访问'
            ]
          });
        }
        
        return baseResults;
      }
      
      // 自然语言问答功能
      const questionInput = document.querySelector('input[placeholder="输入你的问题..."]');
      const sendQuestionBtn = document.querySelector('.fa-paper-plane').closest('button');
      
      sendQuestionBtn.addEventListener('click', function() {
        const question = questionInput.value.trim();
        if (question) {
          // 模拟AI回答
          const answer = getAIAnswer(question);
          showAIAnswer(question, answer);
          questionInput.value = '';
        }
      });
      
      // 获取AI回答
      function getAIAnswer(question) {
        const qaMap = {
          '为什么租户A的登录失败率高': '根据日志分析，租户A的登录失败主要原因是密码错误次数过多导致账户锁定。建议检查密码策略和用户教育。',
          '如何优化数据库查询性能': '建议：1. 为常用查询字段添加索引 2. 避免SELECT * 查询 3. 使用连接查询替代子查询 4. 考虑分库分表',
          '系统出现内存泄漏怎么办': '内存泄漏排查步骤：1. 使用内存分析工具 2. 检查大对象引用 3. 验证资源释放 4. 监控GC日志'
        };
        
        for (const [key, answer] of Object.entries(qaMap)) {
          if (question.includes(key)) {
            return answer;
          }
        }
        
        return '这是一个很好的问题！基于系统日志分析，我建议您提供更多具体信息，以便我给出更精确的解答。';
      }
      
      // 显示AI回答
      function showAIAnswer(question, answer) {
        const qaContainer = document.querySelector('.space-y-3');
        const qaDiv = document.createElement('div');
        qaDiv.className = 'p-3 bg-light-1 rounded-lg';
        qaDiv.innerHTML = `
          <p class="text-sm font-medium mb-2">Q: ${question}</p>
          <p class="text-sm text-dark-2">A: ${answer}</p>
        `;
        qaContainer.appendChild(qaDiv);
      }
    });
  </script>
</body>
</html>